<template>
  <div class="box1">
    <h4>支持loading</h4>
    <div class="row">
      <qr-button loading>加载中</qr-button>
    </div>
    <div class="show">
      <span @click="ShowMsg">{{ msg }}</span>
      <div class="markdown-body" v-show="isShow">
        <button8-md></button8-md>
      </div>
    </div>
  </div>
</template>

<script>
import Button8Md from "@/markdown/button/Button8.md";
export default {
  name: "Button2",
  components: {
    Button8Md,
  },
  data() {
    return {
      isShow: true,
      msg: "隐藏代码",
    };
  },
  methods: {
    ShowMsg() {
      this.isShow = !this.isShow;
      this.isShow == true ? (this.msg = "隐藏代码") : (this.msg = "显示代码");
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
  margin-top: 15px;
  .qr-button {
    margin-right: 20px;
  }
}
h3 {
  font-weight: 400;
}
span {
  font-size: 14px;
  color: #409eff;
  margin-left: 300px;
  display: block;
  height: 50px;
  opacity: 0.7;
}
span:hover {
  color: #409eff;
  opacity: 1;
  cursor: pointer;
}
.markdown-body {
  font-size: 17px;
}
.box1 {
     width: 1000px;
     margin-top: 20px;
     border: 1px #ccc solid;
     border-radius: 5px;
     padding: 10px 20px;
     box-shadow: 7px 7px 7px -1px rgba(0, 0,0, .2);
   }
</style>



